<template>
  <div>
    <div class="card" style="margin-bottom: 10px">
      <el-input placeholder="请输入患者姓名查询" style="width: 200px" v-model="data.name"></el-input>
      <el-input placeholder="请输入影像名查询" style="width: 200px;margin-left: 5px" v-model="data.imageName"></el-input>
      <el-button type="info" plain style="margin-left: 10px" @click="loadDiagnosis()">查询</el-button>
      <el-button type="warning" plain style="margin-left: 10px" @click="reset">重置</el-button>
    </div>

    <div class="card">

      <el-table :data="data.tableData" stripe max-height="520">
        <el-table-column prop="name" label="用户姓名"></el-table-column>
        <el-table-column prop="imageName" label="影像名称" width="120"></el-table-column>
        <el-table-column prop="requestedAt" label="诊断申请提交时间" width="180"></el-table-column>
        <!-- 患者主诉 -->
        <el-table-column
            width="200"
            prop="patientComplaint"
            label="患者主诉"
            :show-overflow-tooltip="false"
            :cell-style="{ whiteSpace: 'normal' }">
        </el-table-column>

        <!-- 现病史 -->
        <el-table-column
            width="200"
            prop="currentMedicalHistory"
            label="现病史"
            :show-overflow-tooltip="false"
            :cell-style="{ whiteSpace: 'normal' }">
        </el-table-column>

        <!-- 既往史 -->
        <el-table-column
            width="200"
            prop="pastMedicalHistory"
            label="既往史"
            :show-overflow-tooltip="false"
            :cell-style="{ whiteSpace: 'normal' }">
        </el-table-column>

        <!-- 家族史 -->
        <el-table-column
            width="200"
            prop="familyMedicalHistory"
            label="家族史"
            :show-overflow-tooltip="false"
            :cell-style="{ whiteSpace: 'normal' }">
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template v-slot="scope">
            <el-tag
                :type="scope.row.status === 'Completed' ? 'success' : 'warning'"
                disable-transitions
            >
              {{ scope.row.status === 'Completed' ? '已诊断' : '诊断中' }}
            </el-tag>
          </template>
        </el-table-column>


        <el-table-column label="操作" align="center" width="600">
          <template v-slot="scope">
            <el-button size="mini" type="success" plain @click="handleDiagnosis(scope.row)">
              查看辅助诊断结果
            </el-button>
            <el-button size="mini" type="primary" plain @click="lookPng(scope.row)">
              查看脑影像
            </el-button>
            <el-button size="mini" type="warning" plain @click="handleLookDiagnosis(scope.row)" v-if="scope.row.status === 'Completed'">
              查看诊断信息
            </el-button>
            <el-button size="mini" type="danger" plain @click="handleDownload(scope.row)" >
              下载原始影像文件
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
            style="margin-top: 5px"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="data.pageNum"
            :page-sizes="[3, 5, 10, 15, 20]"
            :page-size="data.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="data.total">
        </el-pagination>
      </div>
    </div>

    <!-- 优化后的脑影像图片弹框 -->
    <el-dialog
        title="脑影像分析视图"
        v-model="data.PngVisible"
        width="90%"
        :close-on-click-modal="false"
        destroy-on-close
        class="brain-image-dialog">

      <div class="brain-view-container">
        <!-- 工具栏 -->
        <div class="toolbar">
          <el-radio-group v-model="data.currentView" size="large">
            <el-radio-button label="all">全部视图</el-radio-button>
            <el-radio-button label="axial">横轴位</el-radio-button>
            <el-radio-button label="sagittal">矢状位</el-radio-button>
            <el-radio-button label="coronal">冠状位</el-radio-button>
          </el-radio-group>

          <div class="view-controls">
            <el-tooltip content="图像缩放">
              <div class="zoom-control">
                <el-icon><ZoomOut /></el-icon>
                <el-slider v-model="data.zoomLevel" :min="50" :max="150" style="width: 100px"/>
                <el-icon><ZoomIn /></el-icon>
              </div>
            </el-tooltip>
            <el-button-group>
              <el-tooltip content="重置视图">
                <el-button :icon="Refresh" circle @click="resetView"/>
              </el-tooltip>
            </el-button-group>
          </div>
        </div>

        <!-- 图像展示区域 -->
        <el-row :gutter="20" class="image-container">
          <!-- 横轴位图像 -->
          <el-col :span="viewSpan" v-show="showView('axial')">
            <div class="view-panel">
              <div class="panel-header">
                <h3>横轴位图像</h3>
                <div class="panel-controls">
                  <span class="image-count">共 {{ data.AxialImages.length }} 张</span>
                  <el-tooltip content="自动播放">
                    <el-button :icon="VideoPlay" circle size="small" @click="playSlideshow('axial')"/>
                  </el-tooltip>
                </div>
              </div>
              <el-scrollbar class="custom-scrollbar" :style="scrollbarStyle">
                <div class="image-grid">
                  <div v-for="(image, index) in data.AxialImages"
                       :key="index"
                       class="image-wrapper">
                    <el-image
                        :src="image"
                        :style="imageStyle"
                        :preview-src-list="data.AxialImages"
                        :initial-index="index"
                        :z-index="3000"
                        fit="contain"
                        loading="lazy"
                        :hide-on-click-modal="false"
                        preview-teleported
                        @load="handleImageLoad"
                    >
                      <template #placeholder>
                        <div class="image-placeholder">
                          <el-icon class="is-loading"><Loading /></el-icon>
                          <span>加载中...</span>
                        </div>
                      </template>
                      <template #error>
                        <div class="image-error">
                          <el-icon><PictureFilled /></el-icon>
                          <span>加载失败</span>
                        </div>
                      </template>
                    </el-image>
                    <div class="image-index">{{ index + 1 }}/{{ data.AxialImages.length }}</div>
                  </div>
                </div>
              </el-scrollbar>
            </div>
          </el-col>

          <!-- 矢状位图像 -->
          <el-col :span="viewSpan" v-show="showView('sagittal')">
            <div class="view-panel">
              <div class="panel-header">
                <h3>矢状位图像</h3>
                <div class="panel-controls">
                  <span class="image-count">共 {{ data.SagittalImages.length }} 张</span>
                  <el-tooltip content="自动播放">
                    <el-button :icon="VideoPlay" circle size="small" @click="playSlideshow('sagittal')"/>
                  </el-tooltip>
                </div>
              </div>
              <el-scrollbar class="custom-scrollbar" :style="scrollbarStyle">
                <div class="image-grid">
                  <div v-for="(image, index) in data.SagittalImages"
                       :key="index"
                       class="image-wrapper">
                    <el-image
                        :src="image"
                        :style="imageStyle"
                        :preview-src-list="data.SagittalImages"
                        :initial-index="index"
                        :z-index="3000"
                        fit="contain"
                        loading="lazy"
                        :hide-on-click-modal="false"
                        preview-teleported
                    >
                      <template #placeholder>
                        <div class="image-placeholder">
                          <el-icon class="is-loading"><Loading /></el-icon>
                          <span>加载中...</span>
                        </div>
                      </template>
                    </el-image>
                    <div class="image-index">{{ index + 1 }}/{{ data.SagittalImages.length }}</div>
                  </div>
                </div>
              </el-scrollbar>
            </div>
          </el-col>

          <!-- 冠状位图像 -->
          <el-col :span="viewSpan" v-show="showView('coronal')">
            <div class="view-panel">
              <div class="panel-header">
                <h3>冠状位图像</h3>
                <div class="panel-controls">
                  <span class="image-count">共 {{ data.CoronalImages.length }} 张</span>
                  <el-tooltip content="自动播放">
                    <el-button :icon="VideoPlay" circle size="small" @click="playSlideshow('coronal')"/>
                  </el-tooltip>
                </div>
              </div>
              <el-scrollbar class="custom-scrollbar" :style="scrollbarStyle">
                <div class="image-grid">
                  <div v-for="(image, index) in data.CoronalImages"
                       :key="index"
                       class="image-wrapper">
                    <el-image
                        :src="image"
                        :style="imageStyle"
                        :preview-src-list="data.CoronalImages"
                        :initial-index="index"
                        :z-index="3000"
                        fit="contain"
                        loading="lazy"
                        :hide-on-click-modal="false"
                        preview-teleported
                    >
                      <template #placeholder>
                        <div class="image-placeholder">
                          <el-icon class="is-loading"><Loading /></el-icon>
                          <span>加载中...</span>
                        </div>
                      </template>
                    </el-image>
                    <div class="image-index">{{ index + 1 }}/{{ data.CoronalImages.length }}</div>
                  </div>
                </div>
              </el-scrollbar>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-dialog>

    <el-dialog title="提交诊断申请" v-model="data.DiagnosingVisible" width="85%" :close-on-click-modal="false" destroy-on-close>
      <el-form :model="data.DiagnosisForm" :rules="rules" ref="diagnosisForm" label-width="120px" style="padding-right: 50px">


        <el-form-item label="诊断结果" prop="doctorDiagnosis">
          <el-input
              type="textarea"
              v-model="data.DiagnosisForm.doctorDiagnosis"
              placeholder="请输入诊断结果"
              rows="3">
          </el-input>
        </el-form-item>

        <el-form-item label="诊断依据" prop="diagnosticBasis">
          <el-input
              type="textarea"
              v-model="data.DiagnosisForm.diagnosticBasis"
              placeholder="请输入诊断依据"
              rows="3">
          </el-input>
        </el-form-item>

        <el-form-item label="治疗建议" prop="treatmentSuggestion">
          <el-input
              type="textarea"
              v-model="data.DiagnosisForm.treatmentSuggestion"
              placeholder="请输入治疗建议"
              rows="3">
          </el-input>
        </el-form-item>

        <!-- 提交按钮 -->
        <el-form-item>
          <el-button type="primary" @click="submitResult">上传诊断信息</el-button>
          <el-button @click="data.DiagnosingVisible = false">取消</el-button>
        </el-form-item>

      </el-form>
    </el-dialog>

    <!-- 诊断信息弹框部分 -->
    <el-dialog
        title="诊断信息详情"
        v-model="data.LookDiagnosisVisible"
        width="50%"
        :close-on-click-modal="false"
        destroy-on-close
        class="diagnosis-detail-dialog"
    >
      <div class="diagnosis-detail-content">
        <!-- 基本信息区域 -->
        <div class="info-section">
          <h3 class="section-title">基本信息</h3>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="info-item">
                <span class="label">患者姓名:</span>
                <span class="value">{{ data.LookDiagnosisForm.name }}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <span class="label">专家姓名:</span>
                <span class="value">{{ data.LookDiagnosisForm.expertName || '未指定' }}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <span class="label">请求时间:</span>
                <span class="value">{{ data.LookDiagnosisForm.requestedAt }}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <span class="label">诊断日期:</span>
                <span class="value">{{ data.LookDiagnosisForm.diagnosisDate }}</span>
              </div>
            </el-col>
          </el-row>
        </div>

        <!-- 病史信息区域 -->
        <div class="info-section">
          <h3 class="section-title">病史信息</h3>
          <div class="history-item">
            <div class="history-label">患者主诉</div>
            <div class="history-content">{{ data.LookDiagnosisForm.patientComplaint }}</div>
          </div>
          <div class="history-item">
            <div class="history-label">当前病史</div>
            <div class="history-content">{{ data.LookDiagnosisForm.currentMedicalHistory }}</div>
          </div>
          <div class="history-item">
            <div class="history-label">既往病史</div>
            <div class="history-content">{{ data.LookDiagnosisForm.pastMedicalHistory }}</div>
          </div>
          <div class="history-item">
            <div class="history-label">家族病史</div>
            <div class="history-content">{{ data.LookDiagnosisForm.familyMedicalHistory }}</div>
          </div>
        </div>

        <!-- 诊断结果区域 -->
        <div class="info-section">
          <h3 class="section-title">诊断结果</h3>
          <div class="diagnosis-item">
            <div class="diagnosis-label">诊断结果</div>
            <div class="diagnosis-content">{{ data.LookDiagnosisForm.doctorDiagnosis }}</div>
          </div>
          <div class="diagnosis-item">
            <div class="diagnosis-label">诊断依据</div>
            <div class="diagnosis-content">{{ data.LookDiagnosisForm.diagnosticBasis }}</div>
          </div>
          <div class="diagnosis-item">
            <div class="diagnosis-label">治疗建议</div>
            <div class="diagnosis-content">{{ data.LookDiagnosisForm.treatmentSuggestion }}</div>
          </div>
        </div>
      </div>

      <template #footer>
        <el-button type="primary" @click="data.LookDiagnosisVisible = false">关闭</el-button>
      </template>
    </el-dialog>


    <el-dialog
        title="AI 辅助诊断结果"
        v-model="data.AssistResultVisiable"
        width="50%"
        :close-on-click-modal="false"
        destroy-on-close
        class="assist-diagnosis-dialog">
      <div class="assist-diagnosis-content">
        <!-- 添加图标和标题区 -->
        <div class="diagnosis-header">
          <div class="diagnosis-result">
            {{ getDiagnosisTitle(data.AssistResultForm.label) }}
          </div>
          <div class="diagnosis-time">分析时间：{{ formatDateTime(data.AssistResultForm.createdAt) }}</div>
        </div>

        <div class="diagnosis-detail">
          {{ getDiagnosisDescription(data.AssistResultForm.label) }}
        </div>

        <!-- 注意事项 -->
        <div class="diagnosis-notice">
          <el-alert
              type="info"
              :closable="false"
              show-icon>
            <template #title>
              重要提示
            </template>
            <template #default>
              本结果仅供临床参考，最终诊断请以专业医生的综合判断为准。
            </template>
          </el-alert>
        </div>
      </div>
    </el-dialog>

  </div>
  <el-dialog
      v-model="data.slideshowDialog"
      title="图像自动播放"
      width="80%"
      :close-on-click-modal="false"
      @close="closeSlideshow"
      destroy-on-close
      class="slideshow-dialog"
  >
    <div class="slideshow-container">
      <div class="slideshow-image">
        <el-image
            v-if="data.slideshowImages.length > 0"
            :src="data.slideshowImages[data.currentSlideIndex]"
            fit="contain"
            style="width: 100%; height: 60vh;"
        />
      </div>
      <div class="slideshow-controls">
      <span class="image-counter">
        {{ data.currentSlideIndex + 1 }} / {{ data.slideshowImages.length }}
      </span>
        <el-button-group>
          <el-button
              :icon="data.isPlaying ? VideoPause : VideoPlay"
              @click="togglePlay"
              type="primary"
          >
            {{ data.isPlaying ? '暂停' : '播放' }}
          </el-button>
          <el-button @click="closeSlideshow">关闭</el-button>
        </el-button-group>
      </div>
    </div>
  </el-dialog>
</template>



<script setup>
import { reactive,computed, ref } from 'vue'
import request from '@/utils/request'
import { ElMessage, ElMessageBox } from 'element-plus'
import { hideLoading, showLoading } from "@/utils/LoadingUtil"
import {Loading,FullScreen, PictureFilled, Refresh, VideoPlay, Monitor,ZoomIn, ZoomOut} from "@element-plus/icons-vue";

// 定义响应式数据
const data = reactive({
  tableData: [],  // 表格数据
  pageNum: 1,     // 当前页码
  pageSize: 10,   // 每页显示数量
  total: 0,       // 总记录数
  name: null, // 搜索条件1
  imageName: null, // 搜索条件2
  formVisible: false, // 表单显示状态
  form: {},       // 表单数据
  ids: [],        // 选中数据的ID
  user: JSON.parse(localStorage.getItem('system-user') || '{}'), // 当前用户信息
  niiInfo: {},
  AxialImages: [],
  SagittalImages: [],
  CoronalImages: [],
  PngVisible: false,
  DiagnosingVisible: false, // 诊断表单显示状态
  DiagnosisForm: {},
  LookDiagnosisForm: {},
  LookDiagnosisVisible: false,
  AssistResultForm: {},
  AssistResultVisiable: false, // 辅助诊断结果框
  slideshowDialog: false,
  currentSlideIndex: 0,
  currentSlideshow: null,
  slideshowImages: [],
  isPlaying: false
})

// 表单验证规则
const diagnosisForm = ref()
const rules = {
  doctorDiagnosis: [{ required: true, message: '请输入诊断结果', trigger: 'blur' }],
  diagnosticBasis: [{ required: true, message: '请输入诊断依据', trigger: 'blur' }],
  treatmentSuggestion: [{ required: true, message: '请输入治疗建议', trigger: 'blur' }]
}

// 加载诊断数据
const loadDiagnosis = async () => {
  try {
    const res = await request.get('/diagnosis/selectDiagnosedPageToExpert', {
      params: {
        pageNum: data.pageNum,
        pageSize: data.pageSize,
        name: data.name,
        imageName: data.imageName,
        expertId: data.user.id
      }
    })
    if (res.code === '200') {
      data.tableData = res.data?.list || []
      data.total = res.data?.total || 0
    } else {
      showError(res.msg)
    }
  } catch (error) {
    showError(error.message)
  }
}

// 重置筛选条件
const reset = () => {
  data.name = null
  data.imageName = null
  loadDiagnosis()
}

// 页面下标
const handleSizeChange = (pageSize) => {
  data.pageSize = pageSize
  loadDiagnosis()
}

// 处理页码变化
const handleCurrentChange = (pageNum) => {
  data.pageNum = pageNum
  loadDiagnosis()
}

// 查看脑影像
const lookPng = async (row) => {
  data.AxialImages = [];
  data.SagittalImages = [];
  data.CoronalImages = [];
  data.PngVisible = false;

  showLoading('加载中...');

  try {
    const res = await request.get(`/mriImages/getPngList/${row.seed}/${row.imageName}`);

    if (res.code !== '200') {
      ElMessage.error(res.msg || '请求失败，请重试');
      return;
    }

    const uploadTime = new Date(row.uploadedAt);
    const currentTime = new Date();
    const timeDiff = currentTime - uploadTime;

    if (res.data.length === 0) {
      if (timeDiff < 300000) {
        ElMessage.warning('当前图像正在生成，请等待3-5分钟');
      } else {
        ElMessage.error('当前图像生成失败，请联系管理员或重新上传');
      }
    } else {
      data.AxialImages = res.data[0];
      data.SagittalImages = res.data[2];
      data.CoronalImages = res.data[1];
      data.PngVisible = true; // 显示对话框
    }
  } catch (error) {
    console.error('请求失败:', error);
    ElMessage.error('网络请求失败，请稍后重试');
  } finally {
    hideLoading();
  }
};


// 获取 NII 信息
const getNiiInfo = async (imageId) => {
  try {
    const res = await request.get(`/mriImages/selectById/${imageId}`)
    if (res.code === '200') {
      data.niiInfo = res.data
    } else {
      showError(res.msg)
    }
  } catch (error) {
    showError(error.message)
  }
}

// 输入诊断结果
const handleInputResult = (row) => {
  data.DiagnosingVisible = true
  data.DiagnosisForm = {
    id: row.id,
    status: 'Completed',
    expertId: data.user.id,
    imageId: row.imageId
  }
}

// 提交诊断结果
const submitResult = () => {
  diagnosisForm.value.validate(async (valid) => {
    if (valid) {
      try {
        const res = await request.put('/diagnosis/updateStatus', data.DiagnosisForm)
        if (res.code === '200') {
          ElMessage.success('提交成功')
          data.DiagnosingVisible = false
          loadDiagnosis()
        } else {
          showError(res.msg)
        }
      } catch (error) {
        showError(error.message)
      }
    }
  })
}

// 统一的错误处理函数
const showError = (message) => {
  ElMessage.error(message || '发生错误，请稍后重试')
}

// 查看辅助诊断结果
const handleDiagnosis = (row) => {
  request.get('/mriImages/selectById/' + row.imageId).then((res) => {
    if(res.code === '200' || res.data.label !== null) {
      data.AssistResultVisiable = true
      data.AssistResultForm = res.data
    } else {
      ElMessage.error("执行错误！！！")
      data.AssistResultVisiable = false
    }
  })
}

const handleLookDiagnosis = (row) => {
  data.LookDiagnosisForm = JSON.parse(JSON.stringify(row))
  data.LookDiagnosisVisible = true
}

// 下载脑影像数据
const handleDownload = (row) => {
  request.get('mriImages/downloadNiiFile/' + row.imageId).then((res) => {
    window.location.href = res.data
  })
}

// 初次加载数据
loadDiagnosis()
// script setup 部分需要添加的代码
const viewSpan = computed(() => {
  switch (data.currentView) {
    case 'all':
      return 8; // 三列布局
    default:
      return 24; // 单列布局
  }
})

// 视图控制相关的响应式数据
data.currentView = 'all'
data.zoomLevel = 100
data.slideshowIntervals = {}

// 视图控制方法
const showView = (view) => {
  return data.currentView === 'all' || data.currentView === view
}

const resetView = () => {
  data.zoomLevel = 100
  data.currentView = 'all'
}

// 计算图片样式
const imageStyle = computed(() => ({
  transform: `scale(${data.zoomLevel / 100})`,
  transition: 'transform 0.3s'
}))

// 计算滚动条样式
const scrollbarStyle = computed(() => ({
  height: data.currentView === 'all' ? '60vh' : '80vh'
}))

// 图片加载处理
const handleImageLoad = () => {
  // 可以添加图片加载完成后的处理逻辑
}

// 播放幻灯片
const playSlideshow = (view) => {
  const images = {
    axial: data.AxialImages,
    sagittal: data.SagittalImages,
    coronal: data.CoronalImages
  }[view]

  if (!images || images.length === 0) {
    ElMessage.warning('没有可播放的图片')
    return
  }

  // 设置幻灯片数据
  data.slideshowImages = images
  data.currentSlideIndex = 0
  data.slideshowDialog = true
  data.isPlaying = true

  // 开始自动播放
  startSlideshow()
}

// 添加新的控制函数
const startSlideshow = () => {
  if (data.currentSlideshow) {
    clearInterval(data.currentSlideshow)
  }

  data.currentSlideshow = setInterval(() => {
    if (data.isPlaying) {
      data.currentSlideIndex = (data.currentSlideIndex + 1) % data.slideshowImages.length
    }
  }, 1000) // 每秒切换一张
}

const togglePlay = () => {
  data.isPlaying = !data.isPlaying
  if (data.isPlaying) {
    startSlideshow()
  }
}

const closeSlideshow = () => {
  if (data.currentSlideshow) {
    clearInterval(data.currentSlideshow)
  }
  data.slideshowDialog = false
  data.isPlaying = false
  data.currentSlideIndex = 0
}

// 格式化日期时间
const formatDateTime = (datetime) => {
  if (!datetime) return '未知'
  return new Date(datetime).toLocaleString()
}

// 获取诊断标题
const getDiagnosisTitle = (label) => {
  if (!label) return '暂无诊断结果'
  return `AI 诊断结果：${label}`
}

// 获取诊断描述
const getDiagnosisDescription = (label) => {
  if (!label) return '未能获取有效的诊断结果'
  // 这里可以根据不同的标签返回详细的描述信息
  return `基于深度学习模型分析，该影像显示${label}特征。建议结合临床症状进行综合判断。`
}
</script>

<style scoped>
/* 整体布局样式，适用于表单中的内容 */
.diagnosis-form .el-form-item {
  margin-bottom: 18px;
}

.diagnosis-form .el-form-item__label {
  font-size: 18px;          /* 字体大些便于阅读 */
  font-weight: bold;        /* 增加粗体强调 */
  color: #333;              /* 深色提升对比 */
}

.form-value {
  font-size: 20px;          /* 较大字体便于老年人阅读 */
  color: #444;              /* 比较清晰的中深色 */
}

.dialog-footer {
  text-align: right;
  padding-top: 20px;
}

.close-button {
  font-size: 18px;          /* 按钮字体增大 */
  background-color: #ff7043; /* 使用暖色调来吸引注意力 */
  color: white;
  border-radius: 8px;       /* 圆角按钮 */
}

.close-button:hover {
  background-color: #ff5722;
}

/* style scoped 部分需要添加的样式 */
.brain-view-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: #f5f7fa;
  border-radius: 4px;
}

.view-controls {
  display: flex;
  align-items: center;
  gap: 20px;
}

.zoom-control {
  display: flex;
  align-items: center;
  gap: 10px;
}

.image-container {
  margin-top: 20px;
}

.view-panel {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 10px;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.panel-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  padding: 10px;
}

.image-wrapper {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  overflow: hidden;
}

.image-index {
  position: absolute;
  bottom: 5px;
  right: 5px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.image-placeholder,
.image-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #909399;
}

.assist-diagnosis-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.diagnosis-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid #ebeef5;
}


.diagnosis-header h2 {
  margin: 0;
  color: #303133;
}

.diagnosis-time {
  margin-left: auto;
  color: #909399;
  font-size: 14px;
}

.diagnosis-result {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.diagnosis-notice {
  margin-top: 16px;
}

.assist-diagnosis-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.diagnosis-result {
  display: flex;
  flex-direction: column;
  gap: 12px;
}.assist-diagnosis-content {
   display: flex;
   flex-direction: column;
   gap: 24px;
   padding: 20px;
   background: #fff;
 }

.diagnosis-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px 0;
  border-bottom: 1px solid #ebeef5;
}

.diagnosis-header h2 {
  margin: 0;
  color: #303133;
  font-size: 20px;
}

.diagnosis-result {
  font-size: 24px;
  font-weight: 600;
  color: #2c3e50;
  text-align: center;
  padding: 16px 24px;
  background-color: #f8faff;
  border-radius: 8px;
  border: 1px solid #e3e8f7;
}

.diagnosis-time {
  color: #909399;
  font-size: 14px;
}

.diagnosis-detail {
  padding: 24px;
  font-size: 16px;
  line-height: 1.8;
  color: #3c4858;
  text-align: center;
  background-color: #fff;
}

/* 诊断结果样式优化 */
.result-content .el-alert {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
  border: 1px solid #e3e8f7;
  background-color: #f8faff;
}

.result-content .el-alert__title {
  font-size: 20px;
  font-weight: 600;
  color: #2c3e50;
  text-align: center;
  margin-bottom: 16px;
  display: block;
}

.result-content .el-alert__description {
  font-size: 16px;
  line-height: 1.8;
  color: #3c4858;
  text-align: center;
  padding: 0 20px;
}

/* 增加内边距使内容更突出 */
.result-content .el-alert {
  padding: 24px 16px;
}
.diagnosis-notice {
  margin-top: 16px;
}

.diagnosis-notice .el-alert {
  background-color: #f4f4f5;
  color: #606266;
}

/* 对话框样式 */
.assist-diagnosis-dialog .el-dialog__header {
  background: #fff;
  padding: 20px;
  border-bottom: 1px solid #ebeef5;
}

.assist-diagnosis-dialog .el-dialog__title {
  color: #303133;
  font-weight: 500;
  font-size: 18px;
}

.assist-diagnosis-dialog .el-dialog__body {
  padding: 0;
  background: #fff;
}

.assist-diagnosis-dialog .el-dialog {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* 诊断信息弹框样式 */
.diagnosis-detail-dialog {
  .el-dialog__body {
    padding: 20px 30px;
  }
}

.diagnosis-detail-content {
  max-height: 70vh;
  overflow-y: auto;
}

.info-section {
  margin-bottom: 24px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;

  &:last-child {
    margin-bottom: 0;
  }
}

.section-title {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  border-left: 4px solid #409EFF;
  padding-left: 10px;
}

.info-item {
  margin-bottom: 12px;

  .label {
    color: #606266;
    margin-right: 8px;
    font-weight: 500;
  }

  .value {
    color: #303133;
  }
}

.history-item,
.diagnosis-item {
  margin-bottom: 16px;

  &:last-child {
    margin-bottom: 0;
  }
}

.history-label,
.diagnosis-label {
  font-weight: 500;
  color: #606266;
  margin-bottom: 8px;
}

.history-content,
.diagnosis-content {
  padding: 12px;
  background: #fff;
  border-radius: 4px;
  color: #303133;
  line-height: 1.6;
  min-height: 40px;
}
</style>